<template>
  <BgVue2 :repeatBgImg="`${BgRepeat}`">
    <template #topImg>
      <img src="@/assets/imgV2/addLp/addLp-bg-top.jpg" />
    </template>
    <template #bottomImg>
      <img src="@/assets/imgV2/addLp/addLp-bg-bottom.png" />
    </template>

    <div class="addLp">
      <div class="list">
        <div class="item">
          <div class="tit"> {{ t('walletGm.KY') }}：{{ at }} </div>
          <div class="ipt">
            <van-field
              v-model="valueAt"
              @input="changeFist"
              type="number"
              :border="false"
            />
          </div>
        </div>
        <div class="item">
          <div class="tit"> {{ t('walletGm.KY') }}：{{ fist }} </div>
          <div class="ipt">
            <van-field
              v-model="valueFist"
              @input="changeAt"
              type="number"
              :border="false"
            />
          </div>
        </div>
      </div>

      <div class="btn-bottom" v-if="canRechargeAt">
        <van-button block @click="rechargeAt"
          >{{ t('walletGm.transfer') }} PLAY</van-button
        >
      </div>
      <div class="btn-bottom" v-if="canRechargeFist">
        <van-button block @click="rechargeFist"
          >{{ t('walletGm.transfer') }} BNB</van-button
        >
      </div>
      <div class="btn-bottom">
        <van-button :disabled="!canAddLp" block @click="submit">{{
          t('home.addLp')
        }}</van-button>
      </div>
    </div>
  </BgVue2>

  <van-overlay :show="show">
    <div class="wrapper" @click.stop>
      <div class="block">
        <van-loading size="24px" color="#fff" vertical>{{
          t('recharge.wait')
        }}</van-loading>
      </div>
    </div>
  </van-overlay>
</template>
<script>
import http from '../http'
import {
  AT_ADDRESS,
  FIST_ADDRESS,
  LP_RECHARGE_ADDRESS,
  TOKEN_DECIMALS,
} from '../abi'
import { transfer, watch } from '../dapp'
import BgRepeat from '@/assets/imgV2/addLp/addLp-bg-repeat.png'
import BgVue2 from '@/components/BgVue2.vue'
import removeZeros from '@/utils/remove-zeros'

export default {
  data() {
    return {
      show: false,
      fist: '0',
      at: '0',
      valueFist: '',
      valueAt: '',
      reserve0: 0,
      reserve1: 0,
      price: 0,
      status: 0,
      BgRepeat,
    }
  },
  computed: {
    canAddLp() {
      return (
        this.valueAt * 1 > 0 &&
        this.valueFist * 1 > 0 &&
        this.at * 1 >= this.valueAt * 1 &&
        this.fist * 1 >= this.valueFist * 1 &&
        this.status === 0
      )
    },
    canRechargeAt() {
      return this.valueAt * 1 > 0 && this.at * 1 < this.valueAt * 1
    },
    canRechargeFist() {
      return this.valueFist * 1 > 0 && this.fist * 1 < this.valueFist * 1
    },
  },
  mounted() {
    console.log('load lp page')
    this.init()
  },
  methods: {
    changeFist(e) {
      var val = this.valueAt
      this.valueFist = (val * this.price).toFixed(6)
    },
    changeAt(e) {
      var val = this.valueFist
      this.valueAt = (val / this.price).toFixed(6)
    },
    async init() {
      const res = await http.get('/api/lp/account')
      if (res.code === 200) {
        this.status = res.data.status
        this.fist = removeZeros(res.data.fist)
        this.at = removeZeros(res.data.at)
        this.reserve0 = res.data.reserve0
        this.reserve1 = res.data.reserve1
        if (this.price > 0) {
          return
        }
        this.price = this.reserve1 / this.reserve0
        console.log(
          'reserve0=',
          this.reserve0,
          'reserve1=',
          this.reserve1,
          'price=',
          this.price,
        )
      }
    },
    async rechargeAt() {
      try {
        var val = (this.valueAt - this.at).toFixed(6)
        console.log('需要充值的数量为', val)
        if (val * 1 > 0) {
          // console.log('recharge=', this.valueAt, this.sum)
          const contractAddress = AT_ADDRESS
          console.log('TOKEN_DECIMALS=', TOKEN_DECIMALS)
          const txid = await transfer(
            contractAddress,
            LP_RECHARGE_ADDRESS,
            val + '',
            TOKEN_DECIMALS[contractAddress],
          )
          this.show = true
          console.log('txid=', txid)
          console.log('wait tx confirm')
          await watch(txid)
          console.log('tx was confirm')
          const res = await http.get(`/api/lp/recharge?txid=${txid}`)
          console.log('reload data')
          this.init()
        }
      } catch (e) {
        Toast(e.message)
        console.log('ee=', e)
      }
      this.show = false
    },
    async rechargeFist() {
      try {
        var val = (this.valueFist - this.fist).toFixed(6)
        console.log('需要充值的数量为', val)
        if (val * 1 > 0) {
          // console.log('recharge=', this.valueAt, this.sum)
          const contractAddress = FIST_ADDRESS
          const txid = await transfer(
            contractAddress,
            LP_RECHARGE_ADDRESS,
            val + '',
            TOKEN_DECIMALS[contractAddress],
          )
          this.show = true
          console.log('txid=', txid)
          console.log('wait tx confirm')
          await watch(txid)
          console.log('tx was confirm')
          const res = await http.get(`/api/lp/recharge?txid=${txid}`)
          console.log('reload data')
          this.init()
        }
      } catch (e) {
        Toast(e.message)
        console.log('ee=', e)
      }
      this.show = false
    },
    async submit() {
      console.log('add lp')
      try {
        this.show = true
        const res = await http.post(
          `/api/lp/add?at=${this.valueAt}&fist=${this.valueFist}`,
        )
        if (res.code === 200) {
          this.valueAt = '0'
          this.valueFist = '0'
          Toast('添加成功')
        }
      } catch (e) {
        console.log('ee=', e)
      }
      this.init()
      this.show = false
    },
  },
  components: { BgVue2 },
}
</script>
<style lang="less" scoped>
.BgVue2 {
  margin-top: -62px;

  & > :deep(.topImg) {
    position: relative;
  }

  & > :deep(.bottomImg) {
    background: #3e83c1 url(@/assets/imgV2/cloud.png) no-repeat 0 bottom;
    background-size: 100% auto;
    min-height: calc(100vh - 190px);
  }
}
.addLp {
  margin-bottom: -270px;
  position: relative;
  // z-index: 0;

  .list {
    width: (550px / 2);
    height: (382px / 2);

    margin: 0 auto;
    background: url(@/assets/imgV2/addLp/addLp-input.png) no-repeat;
    background-size: 100% 100%;

    .van-cell {
      background-color: rgb(255 255 255 / 50%);
      padding: 12px 10px;
      border-radius: 10px;
    }

    .tit {
      // padding: 3px 0 0;
      padding: 3px 0 14px;
      color: #065aa2;
      font-size: 15px;
      text-align: right;
      font-weight: bold;
    }
    .ipt {
      padding: 0 0 10px;
      padding: 0 0 20px;
    }
    // .item + .item {
    //   padding-top: 12px;
    //   .ipt {
    //     padding: 14px 0 0;
    //   }
    // }

    :deep(input) {
      color: #053071;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
    }
  }

  .btn-bottom {
    margin-top: 20px;
    .van-button {
      width: (425px/2);
      height: (113px/2);
      margin: 0 auto;

      color: #ffffff;

      font-size: 18px;
      // -webkit-text-stroke: 1px #df801e;
      text-shadow: #d8540d 1px 0 0, #d8540d 0 1px 0, #d8540d -1px 0 0,
        #d8540d 0 -1px 0;
      background: url(@/assets/imgV2/btn/btn.png);
      background-size: 100% 100%;
      border: none;
      font-weight: bold;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
